<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用友</title>
    <link rel="stylesheet" href="../css/shouye.css">
    <script src='../script/shouye.js'></script>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/box.css" />
    <style>
        a {
            text-decoration: none;
            /* 去除下划线 */
            color: black;
            /* 默认颜色为黑色 */
        }

        a:first-of-type {
            color: red;
            /* 第一个链接的颜色设置为红色 */
        }
    </style>
    <script src="../script/public.js"></script>
    <script>
        function apiready() {
            api.addEventListener({
                name: 'tabitembtn'
            }, function (ret) {
                console.log('点击了第' + (ret.index + 1) + '项');
                api.setTabBarAttr({
                    index: ret.index
                });
            });
        }

        function setTabBarItemDot() {
            api.setTabBarItemAttr({
                index: 2,
                badge: {
                    text: '',
                    radius: 5,
                    x: 8
                }
            });
        }

        var index = 0;
        var timer;
        var dots;

        function nextImg() {
            if (index === dots.length - 1) {
                index = 0;
            } else {
                index++;
            }
            updateCarousel();
        }

        function preImg() {
            if (index === 0) {
                index = dots.length - 1;
            } else {
                index--;
            }
            updateCarousel();
        }

        function updateCarousel() {
            var wrap = document.querySelector(".wrap");
            var offset = -index * 22;  /* 每次移动20%，即一张图片的宽度 */
            wrap.style.transform = `translateX(${offset}%)`;
            dots.forEach((dot, i) => {
                dot.className = i === index ? "on" : "";
            });
        }

        function autoPlay() {
            timer = setInterval(nextImg, 2000);
        }

        window.onload = function () {
            dots = document.querySelectorAll(".buttons span");
            autoPlay();

            document.querySelector(".container").onmouseover = function () {
                clearInterval(timer);
            }

            document.querySelector(".container").onmouseleave = function () {
                autoPlay();
            }

            dots.forEach(function (dot) {
                dot.onclick = function () {
                    index = parseInt(this.id) - 1;
                    updateCarousel();
                }
            });

            updateCarousel();
        }
    </script>
</head>

<body>
    <div class="header">
        YonBIP - 基于用友的工业APP平台
    </div>

    <div class="search-container">
        <input type="text" placeholder="请输入你想知道的资讯" class="search-input">
        <button class="search-button">
            <svg class="search-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <circle cx="11" cy="11" r="8"></circle>
                <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
            </svg>
        </button>
    </div>

    <div class="categories">
        <h2 align='center'>新闻资讯</h2>
        <div class="container">
            <div class="wrap">
                <img src="https://img.cinn.cn/a/10001/202406/540b4c3d265ddb7c9536569bc44a3559.jpg" />
                <img src="http://121.40.201.6/xinwen1.png" />
                <img src="http://121.40.201.6/xinwen2.png" />
                <img src="http://121.40.201.6/xinwen3.jpg" />
                <img src="http://121.40.201.6/xinwen4.png" />
            </div>
            <div class="buttons">
                <span id="1">1</span>
                <span id="2">2</span>
                <span id="3">3</span>
                <span id="4">4</span>
                <span id="5">5</span>
            </div>
            <!-- <a href="javascript:void(0)" class="arrow arrow_left" onclick="preImg()">&lt;</a>
            <a href="javascript:void(0)" class="arrow arrow_right" onclick="nextImg()">&gt;</a> -->
        </div>
        <a href="https://app.www.gov.cn/govdata/gov/202107/06/473149/article.html">提速数字化！百万工业App培育行动开展</a>
        <a href="#">提速智能化!我国工业App突破59万个...</a>
        <a href="#">提速数字化!工信部开展百万工业App培育行动</a>
        <!-- <a href="#">纠治一批不当干预市场竞争行为 国家市...</a> -->
        <!-- <a href="#">2024寻找中国新质生产力标杆”活动火热启动中</a>
        <a href="#">2645米！大港油田刷新国内侧钻井下尾管最长纪录</a>  -->

    </div>

    <div class="latest">
        <h3>行业新闻</h3>
        <a href="#">工业APP与工业互联网平台深度融合，共同构建制造业数字化转型...</a>
        <a href="#">工业APP让工业互联网平台加速实现“数物相合”...</a>
        <a href="#">发展关键软件新赛道，激活数字经济新动能...</a>
        <a href="#">工业APP到底是个啥？ 它有什么用？</a>
        <a href="#">工业App，开启工业互联网蓝海...</a>
        <a href="#">2024年工业互联网APP优秀解决方案公布,摩尔元数再次实力入...</a>
        <a href="#">加速工业软件国产化进程 深化细分场景融合应用|工业软件|...</a>
        <a href="#">穿梭于虚实之间,国产工业仿真软件发展成色几何..._中国经...</a>
        <a href="#">追光、铸箭、造车、制氢,武汉首发工业软件十大场景</a>
        <a href="#">七部门:支持开发绿色低碳领域大数据模型、工业APP等_中国...</a>
    </div>
</body>

</html>